<template>
  <div>
    <el-card shadow="never" class="border-0">
      <el-form inline>
        <el-form-item label="用户编号">
          <el-input placeholder="请输入用户编号" style="width: 200px" v-model="queryParams.userId"/>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="queryParams.status" placeholder="请选择">
            <el-option value="1" label="待审核"></el-option>
            <el-option value="2" label="审核通过"></el-option>
            <el-option value="3" label="审核未通过"></el-option>
            <el-option value="4" label="异常"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" type="info" plain @click="refReshQuery()">重置</el-button>
          <el-button icon="el-icon-search" type="primary" plain @click="getList()">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-tag @click="openInsertDialog()">新增</el-tag>
    </el-card>
    <br/>
    <el-card shadow="never" class="border-0">
      <el-table :data="AddGroupList" border v-loading="loading">
        <el-table-column label="序列" width="80" align="center">
          <template #default="scope">
            {{scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column prop="groupName" label="群聊名称" align="center"></el-table-column>
        <el-table-column label="群聊头像">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="点击可放大图片进行查看" placement="top-start">
              <el-image v-if="scope.row.groupImg" preview-teleported style="width: 50px; height: 30px"
                        :src="viewFristImg(scope.row.groupImg)"
                        :preview-src-list="splitStr(scope.row.groupImg)"></el-image>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="二维码">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="点击可放大图片进行查看" placement="top-start">
              <el-image v-if="scope.row.qrCode" preview-teleported style="width: 50px; height: 30px"
                        :src="viewFristImg(scope.row.qrCode)"
                        :preview-src-list="splitStr(scope.row.qrCode)"></el-image>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="groupPersonCount" label="群聊人数" align="center"></el-table-column>
        <el-table-column prop="userId" label="用户id" align="center"></el-table-column>
        <el-table-column prop="groupId" label="群聊发布内容分组" align="center"></el-table-column>
        <el-table-column prop="status" label="1待审核,2审核通过,3审核不通过,4异常" align="center">
          <template #default="scope">
            <!--            {{scope.row}}-->
            <el-tag v-if="scope.row.status == 1">待审核</el-tag>
            <el-tag v-if="scope.row.status == 2">审核通过</el-tag>
            <el-tag v-if="scope.row.status == 3">审核不通过</el-tag>
            <el-tag v-if="scope.row.status == 4">异常</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm title="真的要删除吗?" confirmButtonText="确认" cancelButtonText="取消" @confirm="deletingById(scope.row.id)">
              <template #reference>
                <el-tag type="danger">删除</el-tag>
              </template>
            </el-popconfirm>
            &nbsp;&nbsp;
            <el-tag type="warning" @click="openEditDialog(scope.row)">编辑</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-size="queryParams.size" :page-sizes="[8, 16, 24,32]"
                     layout="total, sizes, prev, pager, next" :total="queryParams.total" style="float:right;">
      </el-pagination>
    </el-card>


    <el-dialog :visible.sync="insertDialog" :title="title" width="900px">
      <el-form label-width="120px" :model="insertObj" :rules="rules" ref="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="群聊名称" prop="groupName">
              <el-input placeholder="请输入群聊名称" style="width: 240px" v-model="insertObj.groupName"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="群聊人数" prop="groupPersonCount">
              <el-input placeholder="请输入群聊人数" style="width: 240px" v-model="insertObj.groupPersonCount"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户id" prop="userId">
              <el-input placeholder="请输入用户id" style="width: 240px" v-model="insertObj.userId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="群聊发布内容分组" prop="groupId">
              <el-input placeholder="请输入群聊发布内容分组" style="width: 240px" v-model="insertObj.groupId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="1待审核,2审核通过,3审核不通过,4异常" prop="status">
<!--              <el-input placeholder="请输入1待审核,2审核通过,3审核不通过,4异常" style="width: 240px" v-model="insertObj.status"/>-->
              <el-select v-model="insertObj.status" placeholder="请选择">
                <el-option value="1" label="待审核"></el-option>
                <el-option value="2" label="审核通过"></el-option>
                <el-option value="3" label="审核未通过"></el-option>
                <el-option value="4" label="异常"></el-option>
              </el-select>
            </el-form-item>
          </el-col>




          <el-col :span="12">
            <el-form-item label="群聊二维码" prop="qrCode">
              <ImageUpload v-model="insertObj.qrCode" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="群聊头像" prop="groupImg">
              <ImageUpload v-model="insertObj.groupImg" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始日期" prop="createTime">
              <el-date-picker
                v-model="insertObj.createTime"
                type="datetime"
                placeholder="开始日期"
                style="width: 90%;"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-button plain type="info" @click="resetInsertObj()">重置</el-button>
            <el-button plain type="warning" @click.native="submitInsert()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <el-dialog :visible.sync="updateDialog" :title="title" width="900px">
      <el-form label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="群聊名称">
              <el-input placeholder="请输入群聊名称" style="width: 240px" v-model="updateObj.groupName"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="群聊人数">
              <el-input placeholder="请输入群聊人数" style="width: 240px" v-model="updateObj.groupPersonCount"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户id">
              <el-input placeholder="请输入用户id" style="width: 240px" v-model="updateObj.userId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="群聊发布内容分组">
              <el-input placeholder="请输入群聊发布内容分组" style="width: 240px" v-model="updateObj.groupId"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="1待审核,2审核通过,3审核不通过,4异常">
<!--              <el-input placeholder="请输入1待审核,2审核通过,3审核不通过,4异常" style="width: 240px" v-model="updateObj.status"/>-->
              <el-select v-model="updateObj.status" placeholder="请选择">
                <el-option value="1" label="待审核"></el-option>
                <el-option value="2" label="审核通过"></el-option>
                <el-option value="3" label="审核未通过"></el-option>
                <el-option value="4" label="异常"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="群聊二维码">
              <ImageUpload v-model="updateObj.qrCode" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="群聊头像">
              <ImageUpload v-model="updateObj.groupImg" limit="1"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始日期" prop="createTime">
              <el-date-picker
                v-model="updateObj.createTime"
                type="datetime"
                placeholder="开始日期"
                style="width: 90%;"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-button plain type="info" @click="resetUpdateObj()">重置</el-button>
            <el-button plain type="warning" @click="submitUpdate()">提交</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
//引入api接口
import {deleteAddGroup, getAddGroup,insertAddGroup,updateAddGroup} from "@/api/addgroup/addgroup";
export default {
  name: "AddGroup",
  data(){
    return {
      queryParams:{current:1,size:8,total:0,stauts:"",groupName:""},//查询对象
      AddGroupList:[],//展示数据集合
      title:"",//弹窗标题
      insertDialog:false,//新增弹窗
      loading:true,
      //新增对象
      insertObj:{
        groupName:"",//群聊名称
        groupImg:"",//群聊头像
        groupPersonCount:"",//群聊人数
        userId:"",//用户id
        groupId:"",//群聊发布内容分组
        qrCode:"",//群聊二维码
        status:"",//1待审核,2审核通过,3审核不通过,4异常
      },
      updateDialog:false,//修改弹窗
      //修改对象
      updateObj:{
        groupName:"",//群聊名称
        groupImg:"",//群聊头像
        groupPersonCount:"",//群聊人数
        userId:"",//用户id
        groupId:"",//群聊发布内容分组
        qrCode:"",//群聊二维码
        status:"",//1待审核,2审核通过,3审核不通过,4异常
      },
      //规则
      rules: {
        groupName: [{ required: true, message: '请输入群聊名称', trigger: 'blur' }],
        groupImg: [{ required: true, message: '请输入群聊头像', trigger: 'blur' }],
        groupPersonCount: [{ required: true, message: '请输入群聊人数', trigger: 'blur' }],
        userId: [{ required: true, message: '请输入用户id', trigger: 'blur' }],
        groupId: [{ required: true, message: '请输入群聊发布内容分组', trigger: 'blur' }],
        qrCode: [{ required: true, message: '请输入群聊二维码', trigger: 'blur' }],
        status: [{ required: true, message: '请输入1待审核,2审核通过,3审核不通过,4异常', trigger: 'blur' }],
        createTime: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
      }
    }
  },
  methods:{
    //查询方法
    getList(){
      //打开加载
      this.loading = true;
      //调用api接口
      getAddGroup(this.queryParams).then((res)=>{
        //关闭加载
        this.loading = false;
        //赋值展示数据
        this.AddGroupList = res.data.records;
        //赋值展示总行数
        this.queryParams.total = res.data.total;
        //弹出提示
        this.$message({message: '加载完成', type: 'success'});
      })
    },
    //重置查询方法
    refReshQuery(){
      //重置数据
      this.queryParams.groupName = "";
      this.queryParams.status = "";
    },
    //重置新增对象
    resetInsertObj(){
      this.insertObj.groupName = "";
      this.insertObj.groupImg = "";
      this.insertObj.groupPersonCount = "";
      this.insertObj.userId = "";
      this.insertObj.groupId = "";
      this.insertObj.qrCode = "";
      this.insertObj.status = "";
    },
    //重置修改对象
    resetUpdateObj(){
      this.updateObj.groupName = "";
      this.updateObj.groupImg = "";
      this.updateObj.groupPersonCount = "";
      this.updateObj.userId = "";
      this.updateObj.groupId = "";
      this.updateObj.qrCode = "";
      this.updateObj.status = "";
    },
    //删除方法
    deletingById(id){
      //调用api接口
      deleteAddGroup(id).then((res)=>{
        //刷新表格
        this.getList();
        //弹出提示
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }).catch((error)=>{
        //弹出错误提示
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    //新增弹窗打开方法
    openInsertDialog(){
      //数据重置
      this.resetInsertObj();
      //打开弹窗
      this.insertDialog = true;
      //标题
      this.title = "新增产品";
    },
    //打开修改弹窗
    openEditDialog(ele){
      //赋值
      this.updateObj = ele;
      //因为el select
      this.updateObj.status = this.updateObj.status.toString();
      //打开弹窗
      this.updateDialog = true;
      //标题
      this.title = "修改产品";
    },
    //提交修改
    submitUpdate(){
      //调用修改接口
      updateAddGroup(this.updateObj).then((res)=>{
        //刷新表格
        this.getList();
        //关闭弹窗
        this.updateDialog = false;
        //弹出错误提示
        this.$message({
          message: "修改成功",
          type: 'success'
        });
      }).catch((error)=>{
        //弹出错误提示
        this.$message({
          message: error,
          type: 'error'
        });
      })
    },
    //提交新增
    submitInsert(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          //调用api接口
          insertAddGroup(this.insertObj).then((res)=>{
            //刷新表格
            this.getList();
            //关闭弹窗
            this.insertDialog = false;
          }).catch((error)=>{
            //弹出错误提示
            this.$message({
              message: error,
              type: 'error'
            });
          })
        }else{
          //弹出错误提示
          this.$message({
            message: "请将所有必填项进行填写",
            type: 'error'
          });
        }
      })
    },
    //页码更变
    handleCurrentChange(index){
      //赋值数据
      this.queryParams.current = index;
      //调用查询
      this.getList();
    },
    //行数更变
    handleSizeChange(size){
      //重置到第一行
      this.queryParams.current = 1;
      //赋值数据
      this.queryParams.size = size;
      //调用查询
      this.getList();
    },
      //显示首图
      viewFristImg(ele){
        if (ele != null && ele != ''){
        //拆分
        const imageArray = ele.split(",");
        //返回结果
        return imageArray[0];
      }
    },//拆分图片方法
    splitStr(ele) {
      //判断图片不为 null 且 图片不是 ''
      if (ele != null && ele != '') {
        //返回拆分结果
        return ele.split(",");
      } else {
        //否则返回 null
        return null;
      }
    }
  },
  created(){
    //获取集合
    this.getList();
  }
}
</script>
